<template>
  <div class="">
    <Row style="margin: 10px 0px;">
      <label>姓名</label>
      <Input v-model="value14" placeholder="请输入姓名" clearable style="width: 100px"></Input>
      <label style="margin-left: 10px;">考号</label>
      <Input v-model="value14" placeholder="请输入考号" clearable style="width: 150px"></Input>
      <label style="margin-left: 10px;">角色</label>
      <Select v-model="model3" style="width:100px">
        <Option v-for="item in roles" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
      <Button type="primary">Primary</Button>
    </Row>
    <Table :columns="columns1" :data="data1" border></Table>
    <Row style="margin: 10px 0px;">
        <Page :total="100" :page-size="20" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
    </Row>
  </div>

</template>
<script>
    export default {
        data () {
            return {
                value14: '',
                model3: '',
                columns1: [
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '难度',
                        align: 'center',
                        render: (h, params) => {
                            // return (
                            //     <Rate show-text allow-half>
                            //         <span style="color: #f5a623"></span>
                            //     </Rate>
                            // );
                            return h('Rate', {
                                props: {
                                    // showText: true,
                                    value: params.row.difficulty,
                                    allowHalf: true
                                },
                                on: {
                                    input: (rate) => {
                                        this.data1[params.index].difficulty = rate;
                                    }
                                }
                            }, 'View');
                        }
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        difficulty: 3.5
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        difficulty: 4.5
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        difficulty: 4.5
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        difficulty: 4.5
                    }
                ],
                roles: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '考生',
                        label: '考生'
                    },
                    {
                        value: '老师',
                        label: '老师'
                    },
                    {
                        value: '管理员',
                        label: '管理员'
                    }
                ]
            };
        },
        methods: {
            loadPage (index) {
                // console.log(`加载第${index}页数据`);
            }
        }
    };
</script>
